<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }

        #box1 {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }

        #box2 {
            width: 600px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id='box'></div>

    <div id='box1'></div>

    <div id='box2'></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('box'));

        // 指定图表的配置项和数据

        let dataMap = {
            '今日': {
                value: 4260,

            },
            '比昨日': {
                value: +3970,

            },
            '上周周期': {
                value: -2390,

            },
            '本   周': {
                value: 3454,
            }


        }
        let ser_data = [{
            value: 10,
            name: '今日',
            itemStyle: {
                color: '#17A790'
            }
        },
        {
            value: 10,
            name: '比昨日',
            itemStyle: {
                color: 'red'
            }
        },
        {
            value: 10,
            name: '上周周期',
            itemStyle: {
                color: '#FFD027'
            }
        },
        {
            value: 10,
            name: '本   周',
            itemStyle: {
                color: '#868CFF'
            }
        }
        ]


        option = {
            backgroundColor: 'rgba(0,0,0,0)',
            title: [{
                text: '253090',
                top: '45%',
                left: '25%',
                padding: [15, 0, 0, -20],
                textStyle: {
                    color: '#080404',
                    fontSize: 20,
                    fontWeight: 'bold',
                },
            }, {
                text: '总销售额',
                top: '45%',
                left: '28%',
                padding: [-15, 0, 0, -15],
                textStyle: {
                    color: '#080404',
                    fontSize: 18,
                    fontWeight: '400',
                },
            }],
            tooltip: {
                show: false,
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '5%',
                top: 'middle',
                itemGap: 20,
                icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
                formatter: (name) => {

                    return `${name}  |    ${dataMap[name].value}个`
                }
            },
            series: [{
                type: 'pie',
                radius: ['45%', '65%'],
                center: ['28%', '50%'],
                itemStyle: {
                    borderRadius: 5,
                    borderColor: 'rgba(0,0,0,0)',
                    borderWidth: 5,
                },
                label: {
                    show: false
                },
                data: ser_data
            }]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


  
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('box1'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '订单数',
                left: "center",
                top: "8%",
                textStyle: {
                    color: '#111111',
                    fontWeight: 'bold',
                    fontSize: 16,
                },
            },
            backgroundColor: '',
            grid: {
                top: "25%",
                bottom: "10%",
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    var relVal = params[0].name
                    for (var i = 0, l = params.length; i < l; i++) {
                        relVal += '<div style="display: flex;justify-content: space-between;">' +
                            '<div style="margin-top: 5px;margin-right: 40px;">' + params[i].marker + params[i].seriesName + '</div>' +
                            '<div style="margin-top: 5px;font-weight: bold;">' + params[i].value + '人' + '</div>' +
                            '</div>'
                    }
                    return relVal
                },
                axisPointer: {
                    type: "cross",
                    label: {
                        show: false
                    }
                }
            },
            legend: {
                data: ["比昨日", "上周周期", "上月周期"],
                top: "15%",
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    inside: true,
                    color: '#101010',
                    padding: [11, 0, 10, 0],
                    align: 'left',
                    verticalAlign: 'center',
                    fontSize: 14,
                    rich: {},
                },
            },
            xAxis: {
                name: '',
                data: [11.07, 11.09, 11.10, 11.11, 11.12, 11.13],
                type: 'category',
                boundaryGap: true,
                nameTextStyle: {
                    color: '#fff',
                    padding: [0, 0, 6, 0]
                },
                axisTick: {
                    show: false,
                    inside: false,
                    length: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)'
                    }
                },
                axisLine: {
                    show: false,
                    symbol: ['none', 'arrow'],
                    symbolSize: [10, 15],
                    symbolOffset: [0, 0],
                    lineStyle: {
                        width: 2,
                        color: 'rgba(255,255,255,0.6)'
                    }
                },
                axisLabel: {
                    interval: 0,
                    rotate: 0,
                    textStyle: {
                        show: true,
                        color: '#101010',
                        fontSize: '12'
                    }
                }
            },
            yAxis: {
                name: "",
                type: "value",
                nameTextStyle: {
                    color: '#fff',
                    padding: [0, 0, 6, 0]
                },
                axisTick: {
                    show: false,
                    inside: false,
                    length: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E8E8E8'
                    }
                },
                axisLine: {
                    show: false,
                    symbol: ['none', 'arrow'],
                    symbolSize: [10, 15],
                    symbolOffset: [0, 0],
                    lineStyle: {
                        width: 2,
                        color: 'rgba(255,255,255,0.6)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        show: true,
                        color: '#656565',
                        fontSize: '12'
                    }
                }
            },
            series: [
                {
                    name: "比昨日",
                    type: "bar",
                    label: {
                        show: true,
                        position: 'top',
                        color: '#656565',
                        fontWeight: 'bold',
                        fontSize: 14
                    },
                    barWidth: 20,
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0,
                        [
                            { offset: 1, color: 'rgba(27, 136, 255, 1)' },
                            { offset: 0, color: 'rgba(27, 136, 255, 0)' }
                        ]
                    ),
                    data: [1010, 200, 346, 420, 280, 350] // 补全为6个数据点
                },
                {
                    name: "上周周期",
                    type: "bar",
                    barWidth: 20,
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0,
                        [
                            { offset: 1, color: 'rgba(250, 149, 80, 1)' },
                            { offset: 0, color: 'rgba(250, 149, 80, 0)' }
                        ]
                    ),
                    data: [189, 334, 289, 370, 250, 300] // 补全为6个数据点
                },
                {
                    name: "上月周期",
                    type: "bar",
                    barWidth: 20,
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                    color: new echarts.graphic.LinearGradient(
                        0, 1.2, 0, 0,
                        [
                            { offset: 1, color: 'rgba(77, 76, 76, 1)' },
                            { offset: 0, color: 'rgba(140, 136, 136, 0)' }
                        ]
                    ),
                    data: [542, 464, 690, 580, 620, 700] // 补全为6个数据点
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('box2'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '4~9月销量数据',
                left: "center",
                top: "5%",
                textStyle: {
                    color: '#111111',
                    fontWeight: 'bold',
                    fontSize: 16,
                },
            },
            tooltip: {
                trigger: 'axis',
              
                axisPointer: {
                    type: "cross",
                    label: {
                        show: false
                    }
                }
            },
            legend: {
                data: ['arr', 'list'],
                top: "15%",
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: '#101010',
                    fontSize: 14,
                },
            },
            xAxis: {
                type: 'category',
                name: '月份',
                data: ['4月', '5月', '6月', '7月', '8月', '9月'],
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: '#656565',
                        fontSize: '12'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#E8E8E8'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '销量（k）',
                splitLine: {
                    lineStyle: {
                        color: '#E8E8E8'
                    }
                },
                axisLabel: {
                    formatter: '{value} k' 
                },
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [
                {
                    name: '总金额',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 6,
                    smooth: true,
                    itemStyle: {
                        color: '#17A790'
                    },
                    data: [30, 46, 89, 26, 69, 200],
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 12
                    }
                },
                {
                    name: '订单数',
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 6,
                    smooth: true,
                    itemStyle: {
                        color: '#FFD027'
                    },
                    data: [59, 88, 136, 110, 310, 520],
                    label: {
                        show: true,
                        position: 'top',
                        color: "#656565",
                        fontSize: 12
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>